<template>
    <div>
        <page-header title="公告" />
        <page-main>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="未读" name="first">
                        <span slot="label">
                            未读
                            <el-badge value="new" />
                        </span>
                        <page-main title="应急局项目相关事宜" style="background: #e5e9f3;">
                            <div>李明 发布</div>
                            <div>一月前</div>
                        </page-main>
                        <page-main title="xxx项目相关事宜" style="background: #e5e9f3;">
                            <div>王 发布</div>
                            <div>一天前</div>
                        </page-main>
                    </el-tab-pane>
                    <el-tab-pane label="已读" name="second">
                        <page-main title="xxx项目相关事宜" style="background: #e5e9f3;">
                            <div>张 发布</div>
                            <div>一周前</div>
                        </page-main>
                    </el-tab-pane>
                </el-tabs>
            </el-tabs>
        </page-main>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeName: 'first'
        }
    },
    methods: {
        handleClick(tab, event) {

        }
    }
}
</script>

<style lang="scss" scoped>
//scss
</style>